<template>
	<!-- 回收券 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="回收券" showRight other="使用规则" @onClick="showRecycleCouponRule" />
		<view class="status">
			<view class="status_text" :class="{'active':curStatus===index}" @click="changeStatus(item,index)" v-for="(item,index) in statusList" :key="index">
				<text>{{item.name}}</text>
				<view class="line" v-if="curStatus===index"></view>
			</view>
		</view>
		<overlay title="回收券使用规则" :content="recycleCouponRule" ref="overlay" />
		<view class="nocoupon" v-if="recycleCouponList.length===0">
		    <image src="/static/images/mine/noCoupon.png"></image>
			<view class="title">如何获取回收券</view>
			<view class="text">参与签到可获得回收券，连续签到</view>
			<view class="text">前往优惠券中心领取</view>
		</view>
		<view class="coupon_list" v-for="(coupon,i) in recycleCouponList" :key="i" v-else>
			<view class="coupon_item" :class="curStatus===0?'coupon_item1':'coupon_item2'">
				<view class="coupon_price">{{coupon.recycle_ratio}}%</view>
				<view class="coupon_info">
					<view class="coupon_title">{{coupon.name}}</view>
					<view class="coupon_name">{{coupon.activity_name}}</view>
					<view class="coupon_limittime">有效期至 {{coupon.end_tme}}</view>
					<image src="/static/images/mine/used.png" v-if="curStatus===1"></image>
					<image src="/static/images/mine/expired.png" v-if="curStatus===2"></image>
				</view>
				<view class="line"></view>
				<view class="coupon_status">
					<text v-if="curStatus===0" @click="toUse">去使用</text>
					<text v-if="curStatus===1">已使用</text>
					<text v-if="curStatus===2">已失效</text>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" v-if="recycleCouponList.length>0" />
	</view>
</template>

<script>
	import overlay from '@/components/overlay'
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			overlay,
			pullDownRefresh
		},
		data() {
			return {
				page:1,//当前页码
				curtype:'1',//当前选中的回收券类型
				statusList:[
					{
						name:'待使用',
						value:'1'
					},
					{
						name:'已使用',
						value:'2'
					},
					{
						name:'已失效',
						value:'0'
					}
				],//状态列表
				curStatus:0,//当前状态索引
				recycleCouponList:[],//回收券列表
				recycleCouponRule:'',//回收券使用规则
				loading:0
			}
		},
		onShow() {
			this.recycleCouponList = [];
			this.getRecycleCouponList();
			this.getCouponrule();
		},
		onReachBottom() {
			this.page++;
			this.getRecycleCouponList();
		},
		methods: {
			//获取回收券列表
			getRecycleCouponList(){
				this.loading = 1;
				this.$api.myrecycle({
					type:this.curtype,
					offset:this.page,
					limit:this.limit
				}).then(res=>{
					if(res.length>0){
						this.loading = 0;
						this.recycleCouponList = this.recycleCouponList.concat(res);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
			//获取回收券使用规则
			getCouponrule(){
				this.$api.getcouponrule().then(res=>{
					this.recycleCouponRule = res;
				})
			},
			//切换状态
			changeStatus(item,index){
				this.curStatus = index;
				this.curtype = item.value;
				this.page = 1;
				this.recycleCouponList = [];
				this.getRecycleCouponList();
			},
			//显示回收券使用规则
			showRecycleCouponRule(){
				this.$refs.overlay.show();
			},
			//去使用
			toUse(){
				uni.navigateTo({
					url:'/pages/package/package'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 200rpx);
}
.status{
	position: fixed;
	left: 0;
	top: calc(var(--status-bar-height) + 100rpx);
	z-index: 999;
	width: 750rpx;
	height: 100rpx;
	background-color: $white;
	padding: 30rpx 60rpx 37rpx;
	box-sizing: border-box;
	@include between;
	
	&_text{
		font-weight: 400;
		color: #333333;
		font-size: 28rpx;
		position: relative;
	}
	.active{
		font-weight: 600;
		color: $main_color;
		font-size: 34rpx;
	}
	.line{
		width: 70rpx;
		height: 4rpx;
		background-color: $main_color;
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.nocoupon{
	@include column-center;
	
	image{
		width: 204rpx;
		height: 243rpx;
		margin: 52rpx auto 56rpx;
	}
	.title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}
	.text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #666666;
		margin-top: 30rpx;
	}
}
.coupon_list{
	
	.coupon_item1{
		background: linear-gradient(223deg, #01E9FF 0%, #985FFF 100%);
	}
	.coupon_item2{
		background: linear-gradient(223deg, #E2E2E2 0%, #999999 100%);
	}
	.coupon_item{
		width: 690rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin: 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		
		.coupon_price{
			font-size: 72rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			width: 180rpx;
			text-align: center;
		}
		.coupon_info{
			width: 318rpx;
			position: relative;
			
			.coupon_title{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				@include one;
			}
			.coupon_name{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				@include one;
				transform: translateY(30rpx);
			}
			.coupon_limittime{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				@include one;
				margin-top: 63rpx;
			}
			image{
				width: 148rpx;
				height: 148rpx;
				position: absolute;
				top: -30rpx;
				right: 0;
			}
		}
	}
	.line{
		width: 1rpx;
		height: 170rpx;
		border: 1rpx dashed #FFFFFF;
		position: relative;
		
		&::before{
			content: '';
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: $page;
			position: absolute;
			top: -35rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		&::after{
			content: '';
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: $page;
			position: absolute;
			bottom: -35rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.coupon_status{
		width: 116rpx;
		height: 49rpx;
		border-radius: 25rpx;
		border: 2rpx solid #FFFFFF;
		@include center;
		margin: 0 auto;
		
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>
